<template>
    <div class="bg-f2f3f5 leaveSpace">
        <div class="flex justify-center gap-20 max-w-1200 mar-x-auto pad-y-10" style="height: calc(100vh - 91px)">
            <div class="left_navs flex-1 pos-s t-80 bg-white w-px-150 h-200 pad-10 border-rad-5">
                <div class="w-auto font-14 bg-f0f4ff border-rad-5 pad-10">
                    <router-link
                        to="/"
                        style="text-decoration: none; color: #1e9fff"
                    >
                        <span class="mar-r-10">&lt;</span>
                        <span>返回首页</span>
                    </router-link>
                </div>
            </div>

            <div class="flex-6 bg-white border-rad-5">
                <div class="flex tab_items justify-start mar-t-10 mar-x-20">
					<Tabs :currentTab="currentTab" :tabs="tabs" />
				</div>

				<Lines h="2px" w="100%" bg="#f2f3f5" />

                <div class="pad-20 color-666666 font-14">
                    一个热爱编程研究新技术的小团队
                </div>
            </div>

            <div class="right_navs flex-1 pos-s t-80 h-200 font-14">
				<div class="right_greet bg-white pad-20 border-rad-5">
					<div class="font-16 font-b-800">{{ greeting }}</div>
					<span class="color-8a919f">点亮在三人行社区的每一天！！！</span>
				</div>

				<div class="color-999999 pad-15">
					<a href="https://beian.miit.gov.cn/" target="blank">皖ICP 备:078564号-1</a>
					<div>
						<span>Copyright</span>
						<span class="font-16">©</span>
						<span>2025 三人行版权所有</span>
					</div>
				</div>
			</div>
        </div>

        <div class="footer flex flex-column justify-center align-center h-60 mar-t-10 pos-s b-0 font-12 color-999999 bg-white">
			<a href="https://beian.miit.gov.cn/" target="blank" class="text-nowrap">皖ICP 备:078564号-1</a>
			<div>Copyright © 2025 三人行版权所有</div>
		</div>
    </div>
</template>

<script>
    import Lines from '@/components/Lines/index'
	import Tabs from '@/components/Tabs/index'

    import { getGreeting } from '@/utils/lib'
    export default {
        name: 'About',

        components: {
            Lines,
			Tabs
        },

        data() {
            return {
                greeting: '',  // 问候语
				currentTab: 1, // 当前标签

                // 标签
				tabs: [
					{ id: 1, name: '关于' }
				],

            }
        },

        mounted() {
            this.updateGreeting()
        },

        methods: {
            // 更新问候语
			updateGreeting() {
				this.greeting = getGreeting()
			},
        }
    }
</script>

<style lang="scss" scoped>
    @media screen and (max-width: 750px) {
        .right_navs {
            display: none;
        }

        .left_navs {
            display: none;
        }

        .tab_items {
            display: none;
        }

        .leaveSpace {
            padding-left: 0;
            padding-right: 0;
        }

    }
    @media screen and (min-width: 750px) {
        .footer {
            display: none;
        }

        .leaveSpace {
            padding-left: 10px;
            padding-right: 10px;
        }
    }

	.right_greet {
		font-family: "微软雅黑";
		white-space: nowrap;
	}
</style>
